<template>
  <div class="home-root">
    <div class="menu box-border" :style="{height:fullHeight-100+'px'}">
      <p class="menu-title">XLKBLOG</p>
      <ul>
        <li v-for="menu in menus" @click="kindClick(menu.name)">
          <img :src="menu.src">
          <p>{{menu.describe}}</p>
        </li>
      </ul>
    </div>
    <div class="show box-border" :style="{height:fullHeight-30+'px'}">
      <div class="show-top">
        <div class="bedeck" style="background: #FF0000"></div>
        <div class="bedeck" style="background: #1DB63E"></div>
        <div class="bedeck" style="background: #e6a23c"></div>
        <div class="message">
          <img src="../assets/images/message.png">
        </div>
      </div>
      <transition name="transitionName">
        <router-view class="router"/>
      </transition>
    </div>
  </div>
</template>

<script>
  import Link from "./Link";
  import Note from "./Note";
  export default{
    name:"Login",
    components: {Note, Link},
    data() {
      return {
        menus:[
          {
            src: require("../assets/images/note.png"),
            name: "note",
            describe: "我的笔记",
          },
          {
            src: require("../assets/images/diary.png"),
            name: "diary",
            describe: "今日想说",
          },
          {
            src: require("../assets/images/chat.png"),
            name: "chat",
            describe: "聊天室",
          },
          {
            src: require("../assets/images/link.png"),
            name: "link",
            describe: "友情链接",
          },
          {
            src: require("../assets/images/about.png"),
            name: "about",
            describe: "关于本站",
          }
        ],
        fullHeight: document.documentElement.clientHeight,
      }
    },
    methods: {
      kindClick(kind){
        this.$router.push({path:kind});
       /* if(kind==="note"){
          this.$router.push({path:'Note'});
        }
        if(kind==="diary"){
          this.$router.push({path:'/Diary'});
        }
        if(kind==="link"){
          this.$router.push({path:'/Link'});
        }
        if(kind==="leave"){
          this.$router.push({path:'/Leave'});
        }
        if(kind==="about"){
          this.$router.push({path:'/About'});
        }*/
      },
    },
    mounted() {
      let _this = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          _this.fullHeight = window.fullHeight
        })()
      }
    },
    watch:{
      fullHeight (val) {
        if(!this.timer) {
          this.fullHeight = val;
          this.timer = true;
          let that = this;
          setTimeout(function (){
            that.timer = false
          },400)
        }
      }
    }
  }
</script>

<style scoped>
  .home-root{
    padding: 10px 10px 10px 10px;
  }
  .box-border{
    border-radius: 25px;
    box-shadow: 0 0 15px #575757;
  }
  .menu{
    background: linear-gradient(to top, #69479a, #3fa990);
    position: absolute;
    width: 200px;
    min-height: 500px;
    margin-top: 35px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .menu-title{
    text-align: center;
    font-size: 15px;
    width: 150px;
    background: #d9d9d9;
    padding: 5px 5px 5px 5px;
    margin: 25px auto;
    border-radius: 10px;
    font-weight: bold;
    box-shadow: 0 0 50px rgba(69, 155, 146, 0.7) inset;
  }
  .menu-title:hover{
    animation-name: sway;
    animation-duration: 400ms;
    animation-iteration-count: 2;
  }
  @keyframes sway {
    20% {
      -webkit-transform: rotate(10deg);
      -webkit-transform-origin: top center;
      -moz-transform: rotate(10deg);
      -moz-transform-origin: top center;
      transform: rotate(10deg);
      transform-origin: top center;
    }
    40% {
      -webkit-transform: rotate(20deg);
      -webkit-transform-origin: top center;
      -moz-transform: rotate(20deg);
      -moz-transform-origin: top center;
      transform: rotate(20deg);
      transform-origin: top center;
    }
    60% {
      -webkit-transform: rotate(10deg);
      -webkit-transform-origin: top center;
      -moz-transform: rotate(10deg);
      -moz-transform-origin: top center;
      transform: rotate(10deg);
      transform-origin: top center;
    }
    80% {
      -webkit-transform: rotate(-10deg);
      -webkit-transform-origin: top center;
      -moz-transform: rotate(-10deg);
      -moz-transform-origin: top center;
      transform: rotate(-10deg);
      transform-origin: top center;
    }
    100% {
      -webkit-transform: rotate(0deg);
      -webkit-transform-origin: top center;
      -moz-transform: rotate(0deg);
      -moz-transform-origin: top center;
      transform: rotate(0deg);
      transform-origin: top center;
    }
  }
  .menu ul{
    padding-left: 0;
  }
  .menu ul li{
    list-style: none;
    margin: 20px auto;
    text-align: center;
    width: 100px;
    transition-duration: 500ms;
  }
  .menu ul li:hover{
    transform: translateX(30px);

  }
  .menu ul li img{
    width: 40px;
    height: 40px;
  }
  .menu ul li p{
    font-weight: bold;
    font-size: 12px;
    margin-top: 0;;
  }
  .show{
    width: 93%;
    min-width:1000px;
    margin-left: 80px;
    background: #eaeaea;
    overflow: hidden;
    min-height: 560px;
  }
  .show-top{
    height: 30px;
    padding-top: 10px;
  }
  .bedeck{
     width: 18px;
     height: 18px;
     -moz-border-radius: 50px;
     -webkit-border-radius: 50px;
     border-radius: 50px;
     margin-left: 15px;
     float: left;
  }
  .bedeck:hover{
      animation-name: bedeck;
      animation-duration: 400ms;
      animation-iteration-count: 1;
  }
  @keyframes bedeck {
    33% {
      width: 50px;
    }
    66% {
      width: 20px;
    }
    100% {
      width: 30px;
    }
  }
  .message img{
    width: 25px;
    height: 25px;
    float: right;
    margin-right: 30px;
  }
  .message img:hover{
    animation-name: sway;
    animation-duration: 400ms;
    animation-iteration-count: 2;
  }
  .router{
    margin-left: 120px;
  }
</style>

